<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>筛选页</title>
    <link href="css/reset.css" rel="stylesheet">
    <link href="css/main.css" rel="stylesheet">

</head>
<body>
<div class="headerBar">
    <div class="topBar">
        <div class="comWidth">
            <div class="leftArea">
                <a href="#" class="collection">收藏慕课</a>
            </div>
            <div class="rightArea">
                欢迎来到慕课网！<a href="#">[登陆]</a><a href="#">[免费注册]</a>

            </div>
        </div>
    </div>
    <div class="logoBar">
        <div class="comWidth">
            <div class="logo fl">
                <img src="images/logo.jpg" alt="慕课网">
            </div>
            <div class="search-box fl">
                <input class="search-text fl" type="text" >
                <input class="search-btn fr" type="button" value="搜索" >
            </div>
            <div class="shopCar fr">
                <span class="shopText fl">购物车</span>
                <span class="shopNumber fl">10</span>
            </div>
        </div>
    </div>
    <div class="nav-box">
        <div class="comWidth">
            <div class="shopClass fl">
                <h3>全部商品分类<i></i></h3>
            </div>
            <ul class="nav fl">
                <li><a href="#" class="active" >数码城</a> </li>
                <li><a href="#">天黑黑</a> </li>
                <li><a href="#">团购</a> </li>
                <li><a href="#">发现</a> </li>
                <li><a href="#">二手特卖</a> </li>
                <li><a href="#">名品会</a> </li>
            </ul>
        </div>
    </div>
</div>
<div class="hr15"></div>
<div class=" comWidth clearfix products">
    <div class="leftArea">
        <div class="leftNav  vertical">
            <h3 class="nav-title">手机、数码、相机</h3>
            <div class="nav-cont">
                <h3>手机通讯</h3>
                <ul class="navCont-list clearfix">
                    <li><a href="#">全部手机</a> </li>
                    <li><a href="#">全部手机</a> </li>
                    <li><a href="#">全部手机</a> </li>
                    <li><a href="#">全部手机</a> </li>
                </ul>
            </div>
            <div class="nav-cont">
                <h3>手机通讯</h3>
                <ul class="navCont-list clearfix">
                    <li><a href="#">全部手机</a> </li>
                    <li><a href="#">全部手机</a> </li>
                    <li><a href="#">全部手机</a> </li>
                    <li><a href="#">全部手机</a> </li>
                    <li><a href="#">全部手机</a> </li>
                    <li><a href="#">全部手机</a> </li>
                    <li><a href="#">全部手机</a> </li>
                </ul>
            </div>
            <div class="nav-cont">
                <h3>手机通讯</h3>
                <ul class="navCont-list clearfix">
                    <li><a href="#">全部手机</a> </li>
                    <li><a href="#">全部手机</a> </li>
                    <li><a href="#">全部手机</a> </li>
                    <li><a href="#">全部手机</a> </li>
                    <li><a href="#">全部手机</a> </li>
                    <li><a href="#">全部手机</a> </li>
                    <li><a href="#">全部手机</a> </li>
                </ul>
            </div>
        </div>
    </div>
    <div class="rightArea">
        <div class="screen-box">
            <dl class="screening clearfix">
                <dt>手机</dt>
                <dd class="limit"><a href="#" class="active">不限</a> </dd>
                <dd class="screening-list">
                    <ul class="clearfix">
                        <li> <a href="#">三星</a></li>
                        <li> <a href="#">华为</a></li>
                        <li><a href="#">苹果</a></li>
                        <li> <a href="#">苹果</a></li>
                        <li><a href="#">苹果</a></li>
                    </ul>
                </dd>
            </dl>
            <dl class="screening clearfix">
                <dt>手机</dt>
                <dd class="limit"><a href="#" >不限</a> </dd>
                <dd class="screening-list">
                    <ul class="clearfix">
                        <li> <a href="#" class="active">三星</a></li>
                        <li> <a href="#">华为</a></li>
                        <li><a href="#">苹果</a></li>
                        <li> <a href="#">苹果</a></li>
                        <li><a href="#">苹果</a></li>
                        <li><a href="#">苹果</a></li>
                        <li><a href="#">苹果</a></li>
                    </ul>
                </dd>
            </dl>
            <dl class="screening clearfix">
                <dt>手机</dt>
                <dd class="limit"><a href="#" class="active">不限</a> </dd>
                <dd class="screening-list">
                    <ul class="clearfix">
                        <li> <a href="#">三星</a></li>
                        <li> <a href="#">华为</a></li>
                        <li><a href="#">苹果</a></li>
                        <li> <a href="#">苹果</a></li>
                        <li><a href="#">苹果</a></li>
                    </ul>
                </dd>
            </dl>
            <dl class="screening clearfix">
                <dt>手机</dt>
                <dd class="limit"><a href="#" class="active">不限</a> </dd>
                <dd class="screening-list">
                    <ul class="clearfix">
                        <li> <a href="#">三星</a></li>
                        <li> <a href="#">华为</a></li>
                        <li><a href="#">苹果</a></li>
                        <li> <a href="#">苹果</a></li>
                        <li><a href="#">苹果</a></li>
                        <li><a href="#">苹果</a></li>
                        <li><a href="#">苹果</a></li>
                    </ul>
                </dd>
            </dl>
            <dl class="screening clearfix">
                <dt>更多选项</dt>
                <dd class="screening-list">
                    <div class="screen-more">
                        <a href="#">三星</a>
                    </div>
                    <div class="screen-more">
                        <a href="#">三星</a>
                    </div>
                </dd>
            </dl>
        </div>
        <div class="hr15"></div>
        <div class="addInfo">
            <div class="address">
                <span class="add-text">送至：</span>
                <div class="select">
                    <h3> 海淀区五环内</h3>
                    <span></span>
                    <ul class="show-select">
                        <li>上帝</li>
                        <li>上帝</li>
                        <li>上帝</li>
                    </ul>
                </div>
            </div>
            <div class="fr screen-text">
            <span class="check">
                <input type="checkbox" id="checkbox">
                <label for="checkbox">仅显示有货</label>
            </span>
            <span class="shop-number">
                共<em>11111</em>件
            </span>
            </div>
        </div>

        <div class="products-list screening-list-more clearfix">
            <div class="item">
                <div class="item-cont">
                <div class="img-item">
                    <a href="#"><img src="images/htc.jpg" alt=""></a>
                </div>
                <p><a href="#"> 文字介绍文字介绍文字介绍文字介绍文字介绍文字介绍文字介绍文字介绍文字介绍文字介绍</a></p>
                <p class="money">$888</p>
                <p>
                    <a href="#" class="addCar">加入购物车</a>
                </p>
                </div>
            </div>
            <div class="item">
                <div class="item-cont">
                    <div class="img-item">
                        <a href="#"><img src="images/htc.jpg" alt=""></a>
                    </div>
                    <p><a href="#"> 文字介绍文字介绍文字介绍文字介绍文字介绍文字介绍文字介绍文字介绍文字介绍文字介绍</a></p>
                    <p class="money">$888</p>
                    <p>
                        <a href="#" class="addCar">加入购物车</a>
                    </p>
                    <div class="hot"></div>
                </div>
            </div>
            <div class="item">
                <div class="item-cont">
                    <div class="img-item">
                        <a href="#"><img src="images/htc.jpg" alt=""></a>
                    </div>
                    <p><a href="#"> 文字介绍文字介绍文字介绍文字介绍文字介绍文字介绍文字介绍文字介绍文字介绍文字介绍</a></p>
                    <p class="money">$888</p>
                    <p>
                        <a href="#" class="addCar">加入购物车</a>
                    </p>
                </div>
            </div>
            <div class="item">
                <div class="item-cont">
                    <div class="img-item">
                        <a href="#"><img src="images/htc.jpg" alt=""></a>
                    </div>
                    <p><a href="#"> 文字介绍文字介绍文字介绍文字介绍文字介绍文字介绍文字介绍文字介绍文字介绍文字介绍</a></p>
                    <p class="money">$888</p>
                    <p>
                        <a href="#" class="addCar">加入购物车</a>
                    </p>
                </div>
            </div>
            <div class="item">
                <div class="item-cont">
                    <div class="img-item">
                        <a href="#"><img src="images/htc.jpg" alt=""></a>
                    </div>
                    <p><a href="#"> 文字介绍文字介绍文字介绍文字介绍文字介绍文字介绍文字介绍文字介绍文字介绍文字介绍</a></p>
                    <p class="money">$888</p>
                    <p>
                        <a href="#" class="addCar">加入购物车</a>
                    </p>
                </div>
            </div>
            <div class="item">
                <div class="item-cont">
                    <div class="img-item">
                        <a href="#"><img src="images/htc.jpg" alt=""></a>
                    </div>
                    <p><a href="#"> 文字介绍文字介绍文字介绍文字介绍文字介绍文字介绍文字介绍文字介绍文字介绍文字介绍</a></p>
                    <p class="money">$888</p>
                    <p>
                        <a href="#" class="addCar">加入购物车</a>
                    </p>
                </div>
            </div>
            <div class="item">
                <div class="item-cont">
                    <div class="img-item">
                        <a href="#"><img src="images/htc.jpg" alt=""></a>
                    </div>
                    <p><a href="#"> 文字介绍文字介绍文字介绍文字介绍文字介绍文字介绍文字介绍文字介绍文字介绍文字介绍</a></p>
                    <p class="money">$888</p>
                    <p>
                        <a href="#" class="addCar">加入购物车</a>
                    </p>
                </div>
            </div>
            <div class="item">
                <div class="item-cont">
                    <div class="img-item">
                        <a href="#"><img src="images/htc.jpg" alt=""></a>
                    </div>
                    <p><a href="#"> 文字介绍文字介绍文字介绍文字介绍文字介绍文字介绍文字介绍文字介绍文字介绍文字介绍</a></p>
                    <p class="money">$888</p>
                    <p>
                        <a href="#" class="addCar">加入购物车</a>
                    </p>
                </div>
            </div>
        </div>

        <div class="hr25"></div>

        <div class="page">
            <a href="#">上一页</a>
            <a href="#">1</a>
            <a href="#">2</a>
            <a href="#">3</a>
            <a href="#">4</a>
            <a href="#">5</a>
            <a href="#">6</a>
            <span class="hl">...</span>
            <a href="#">200</a>
            <a href="#">下一页</a>
            <span class="morePage">共200页，到</span><input type="text" class="PageNum">
            <span class="ye">页</span>
            <input type="button" value="确定" class="page-btn">

        </div>
        <div class="hr25"></div>



    </div>
</div>



<div class="footer">
    <p>
        <a href="#">慕课简介</a>
        <i>|</i>
        <a href="#">慕课公告</a>
        <i>|</i>
        <a href="#">招贤纳士</a>
        <i>|</i>
        <a href="#">联系我们</a>
        <i>|</i>客服热线400-675-1234
    </p>
    <p>
        Copyright© 2006 - 2014 慕课版权所有&nbsp;&nbsp;&nbsp;京ICP备09037834号&nbsp;&nbsp;&nbsp;
        京ICP证B1034-8373号&nbsp;&nbsp;&nbsp;某市公安局XX分局备案编号：123456789123
    </p>
    <p class="web">
        <a href="#"><img src="images/footer-logo1.jpg" alt="footer-logo"> </a>
        <a href="#"><img src="images/footer-logo1.jpg" alt="footer-logo"> </a>
        <a href="#"><img src="images/footer-logo1.jpg" alt="footer-logo"> </a>
        <a href="#"><img src="images/footer-logo1.jpg" alt="footer-logo"> </a>
    </p>
</div>
</body>
</html>